<template>
  <div class="categories">
    <el-button class="button" type="primary" size="large " @click="addfenlei">添加分类</el-button>
    <Table :data="list" :cols="cols" rowKey="cat_id">
      <template v-slot:deleted="{ row: { cat_deleted } }">
        <el-button v-if="cat_deleted == true" type="success" :icon="Check" circle />
        <el-button v-if="cat_deleted == false" type="danger" :icon="Close" circle />
      </template>

      <template v-slot:level="{ row: { cat_level } }">
        <el-tag :type="colors[cat_level]">
          {{ levels[cat_level] }}级
        </el-tag>
      </template>
      <template v-slot:action="{ row }">
        <el-button type="primary" size="small" @click="updatalist(row)">修改</el-button>
        <el-button type="danger" size="small" @click="delList(row)">删除</el-button>
      </template>
    </Table>
    <!-- -------------------------------------- -->
    <el-dialog v-model="dialogVisible" width="30%" :title="title">
      <el-form :model="ruleForm" class="demo-model">
        <el-form-item label="分类名称" prop="cat_name">
          <el-input v-model="ruleForm.cat_name" placeholder="此项必填" />
        </el-form-item>
        <el-form-item label="父级分类" v-if="!ruleForm.cat_id" prop="cat_pid">
              <el-cascader @change="change" v-model="ruleForm.cat_pid" :options="options" :props="{value:'cat_pid',label: 'cat_name', checkStrictly: true,}" clearable />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirm">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- ------------------------------------- -->
    <el-pagination :current-page="queryModel.pagenum" :page-size="queryModel.pagesize" :page-sizes="[5, 10, 20, 30]"
      :background="true" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />
  </div>
</template>
<script>
import { ref, reactive, toRefs, onMounted,computed} from 'vue'
import Table from '../../components/table.vue'
import { getcategories, delcategories,getcascader,addcascader,updatacascader } from '../../api/goods'
import { ElMessage, ElMessageBox } from "element-plus";
import { Check, Close } from '@element-plus/icons-vue'
export default {
  setup(props) {
    const data = reactive({
      options:[],
      list: [],
      Check: Check,
      Close: Close,
      cols: [
        {
          title: "序号",
          type: "index",
          width: '100'
        },
        {
          title: "分类名称",
          name: "cat_name",

        },
        {
          title: "是否有效",
          slot: "deleted"
        },
        {
          title: "分类排序",
          slot: "level"
        },
        {
          title: "操作",
          slot: "action"
        }
      ],
      total: 0,
      queryModel: {
        pagenum: 1,
        pagesize: 5,
        type: 3
      },
      /**
             * 颜色
             */
      colors: ['', 'success', 'warning'],
      /**
       * 等级
       */
      levels: ['一', '二', '三'],
      dialogVisible:false,
      ruleForm:{},
    });
    onMounted(() => {
      getlist()
    })
    const addfenlei=()=>{
      data.ruleForm={}
        getcascader({type:2}).then(res=>{
          data.options=res.data
        })
        data.dialogVisible=true
    }
    const confirm=()=>{
        if(data.ruleForm.cat_id){
            updatacascader(data.ruleForm)
            getlist()
        }else{
          addcascader({cat_name:data.ruleForm.cat_name,cat_pid:data.ruleForm.cat_pid.slice(-1)[0] ||0,cat_level:data.ruleForm.cat_pid.length||0})
          console.log(data.ruleForm);
          getlist()
        }
        data.dialogVisible=false
    }     
    const change=(value)=>{
        console.log(value);
    }
    const getlist = () => {
      getcategories(data.queryModel).then(res => {
        data.list = res.data
      })
    }
    const handleSizeChange = (val) => {
      data.queryModel.pagesize = val
      getlist()
    }
    const handleCurrentChange = (val) => {
      data.queryModel.pagenum = val
      getlist()
    }
    //编辑商品分类
    const updatalist = (row) => {
      data.dialogVisible=true
      data.ruleForm=row
      console.log(row);
    }
    const title = computed(() => {
      return data.ruleForm.cat_id ? '修改分类' : '添加分类';
    });
    const delList = (row) => {
      ElMessageBox.confirm("你确定要删除本条数据", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delcategories(row.cat_id)
          getlist();
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "已取消",
          });
        });
    }
    return {
      ...toRefs(data),
      getlist,
      handleCurrentChange,
      handleSizeChange,
      updatalist,
      delList,
      addfenlei,
      confirm,
      change,
      title,
    };
  },
  components: { Table }
}
</script>
<style lang="scss" scoped>
.categories {
  padding: 20px 10px;
  background: #fff;
  box-shadow: 1px 1px 30px rgb(151, 146, 146);

  .button {
    margin-left: 40px;
  }
}
</style>
